<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="showDialog"
    class="dialog-big"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item
            label="组件名称"
            prop="title"
            :rules="this.$validator.must"
          >
            <el-input v-model="form.title" auto-complete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="默认开启">
            <el-switch
              v-model="form.defaultFlag"
              active-color="#46a6ff"
              inactive-color="#DCDFE6"
              :active-value="'1'"
              :inactive-value="'0'"
            />
            <el-input-number
              v-if="form.defaultFlag === '1'"
              v-model="form.compSn"
              style="margin-left: 5px"
              :step="1"
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="组件类型"
            prop="compType"
            :rules="this.$validator.must"
          >
            <my-select
              v-model="form.compType"
              clearable
              class="width100percent"
              :dict-type="'compTypeList'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="选择模板"
            prop="vueName"
            :rules="this.$validator.must"
          >
            <my-select
              v-model="form.vueName"
              clearable
              class="width100percent"
              :dict-type="'vueNameOptions'"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="宽" prop="width" :rules="this.$validator.must">
            <el-radio
              v-model="form.widthType"
              label="percentage"
            >填写百分比</el-radio>
            <el-radio v-model="form.widthType" label="num">填写数值</el-radio>

            <el-input
              v-if="form.widthType === 'percentage'"
              v-model="form.width"
              auto-complete="off"
            />
            <el-input-number
              v-if="form.widthType === 'num'"
              v-model="form.width"
              class="width100percent"
              :step="1"
              :max="24"
              :min="1"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="高(px)"
            prop="height"
            :rules="this.$validator.must"
          >
            <el-input-number
              v-model="form.height"
              class="width100percent"
              :min="50"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="组件描述" prop="compDesc">
            <el-input
              v-model="form.compDesc"
              type="textarea"
              :rows="5"
              maxlength="300"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      <el-button @click="showDialog = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'FormDialog',
  props: {

  },
  data() {
    return {
      dialogTitle: '表单弹框',
      form: {
        widthType: 'num'
      },
      showDialog: false
    }
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    init(row) {
      // console.log(row)
      this.showDialog = true
      if (row.pid) {
        // 调用接口
        // this.getById(row.pid)
        return
      }
      //   初始化
      this.form = {
        width: 12,
        height: '200',
        defaultFlag: 0,
        widthType: 'num'
      }
    },
    // 编辑的回显
    getById(compId) {
    },
    submitForm(formName) {
      // 提交表单前校验
      this.$refs[formName].validate((valid) => {
        if (!valid) return
        // 调用接口
        // _compSave(this.form).then((res) => {
        //   if (res.result === "success") {
        //     this.$message({ message: "保存成功", type: "success" });
        //     this.showDialog = false;
        //     this.$emit("closeDialog");
        //   }
        // });
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
